<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchDoctorDetailAPI } from '@/apis/fetchDoctorDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const loading = ref(false)
const detail = ref<Doctor | null>(null)

onLoad(async (options) => {
  if (options && options.id) {
    loading.value = true
    const res = await fetchDoctorDetailAPI({ id: options.id }, userInfoStore.userInfo!.token)
    if (res.data?.code === 1) {
      detail.value = res.data?.data
      loading.value = false
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
      loading.value = false
    }
  }
})
</script>

<template>
  <!-- 顶部图 START -->
  <view class="absolute left-0 top-0">
    <uv-image width="750rpx" height="750rpx" :src="withDomain(detail?.image || '')">
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
  </view>
  <!-- 顶部图 END -->
  <Spacer height="710" />
  <!-- 姓名卡片 START -->
  <view class="relative flex items-center rounded-20rpx from-#4999F7 to-#77DAFE bg-gradient-to-br p-40rpx">
    <view class="text-40rpx text-white font-semibold leading-56rpx">
      {{ detail?.username }}
    </view>
    <Spacer width="12" />
    <view class="rounded-10rpx bg-white px-8rpx py-3rpx text-24rpx text-#4999F7 leading-32rpx">
      {{ detail?.position }}
    </view>
    <image
      class="absolute right-20rpx top-14rpx h-109rpx w-99rpx"
      src="@/static/images/logo_white.png"
    />
  </view>
  <!-- 姓名卡片 START -->
  <Spacer height="24" />
  <!-- 服务项目卡片 START -->
  <view class="rounded-20rpx bg-white px-24rpx">
    <Spacer height="34" />
    <Title>服务项目</Title>
    <Spacer height="24" />
    <view class="flex flex-wrap gap-y-20rpx">
      <view v-for="skill in detail?.server_project.split(',')" :key="skill" class="mr-20rpx rounded-10rpx bg-#F4F4F4 px-14rpx py-10rpx text-28rpx text-#848484 leading-40rpx">
        {{ skill }}
      </view>
    </view>
    <Spacer height="32" />
  </view>
  <!-- 服务项目卡片 END -->
  <Spacer height="24" />
  <!-- 医师简介卡片 START -->
  <view class="rounded-20rpx bg-white px-24rpx">
    <Spacer height="34" />
    <Title>医师简介</Title>
    <Spacer height="24" />
    <view class="text-28rpx text-#848484 leading-40rpx">
      <MpHtml :content="detail?.introduce || '未知'" />
    </view>
    <Spacer height="32" />
  </view>
  <!-- 医师简介卡片 END -->
  <Spacer height="240" />
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'doctorDetail'
style:
  navigationBarTitleText: '医生详情'
</route>
